<!DOCTYPE HTML>
<html>
    <head>
        <title>{{title}}</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <style type="text/css">
            .title {font-weight:bold}
            h1 {color:#212121; font-family: Verdana,Arial,sans-serif/*{ffDefault}*/}
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript">
            // in production, you should proxy this through the backend so you don't leak this api account information
            var apikey = 'A06o3R5GzSghapzf4KBBVbxi'
            var userid = '623519'
            $(document).ready(function() {
                $("#itemContainer").accordion();
                $('#loading').hide();
                $('#loading').ajaxStart(function(){
                    $(this).show();
                });
                $('#loading').ajaxStop(function(){
                    $(this).hide();
                });                
            });
            
            function getCitation(item) {
                //CANNOT DO HTTPS CROSS DOMAIN...FUUUUUUUU
                //Potential Workaround: Write appengine service to wrap HTTP around the HTTPS
                //alert("https://api.zotero.org/users/" + userid + "/items/" + item + "/?key=" + apikey + "&content=bib&style=" + $("#selectStyle").val());
                var url = "https://api.zotero.org/users/" + userid + "/items/" + item + "/?key=" + apikey + "&format=bib&style=" + $("#selectStyle").val();
                //alert("/Citation?item=" + item + "&style=" + $("#selectStyle").val());
                $.ajax({ 
                    url: "/Citation?item=" + item + "&style=" + $("#selectStyle").val(),
                    success: function(data, textStatus) {
                        $("#dump").html(data);
                    },
                    error: function() {
                        $("#dump").html("error");
                    }
                });             
            }
			
			function getBibliography() {
                $.ajax({ 
                    url: "/Bibliography?style=" + $("#selectStyle").val(),
                    success: function(data, textStatus) {
						$("#dump").html(data);
                    },
                    error: function() {
                        $("#dump").html("error");
                    }
                });   
			}		
            
        </script>
    </head>
    <body>
        <header>
            <h1>{{title}}</h1>    
        </header>
        <select id="selectStyle">
            <option value="apa">APA Sixth Edition</option>
            <option value="mla">MLA Seventh Edition</option>
            <option value="chicago-author-date">Chicago Manual of Style (Author-Date format)</option>
        </select>
        <div id="itemContainer" class="ui-accordion ui-widget ui-helper-reset">
            {% for item in items %}
                <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-top"><a href="#"><span class="title">{{item.title}}</span> <span class="author">by: {{item.author_first}} {{item.author_last}}</span></a></h3>
                <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
                    <div class="info">
                        
                    </div>
                    <a href="#" onClick="getCitation('{{item.key}}')">Insert Citation</a>
                </div>
            {% endfor %}
        </div>
        <p><a class="ui-helper-reset ui-widget" href="#" onClick="getBibliography()">Insert Bibliography</a></p>
        <p><a class="ui-helper-reset ui-widget" href="/">Refresh Citations</a></p>
        <div id="dump">
        </div>
        <div id="loading">
        <img src="images/loading.gif"></img>
        </div>
    </body>
</html>